<template>
    <div class="com-cnt">
        <div class="userinfo" v-if="addressInfo.length>0 ">
            <ul class="userinfoCon">
                <li>
                    收货人：
                    <span>{{addressInfo[0].consignee || ''}}</span>
                    <span>{{addressInfo[0].phone}}</span>
                </li> 
                <li>
                    收货地址：
                    <span>{{addressInfo[0].areaName}} {{addressInfo[0].address}}</span>
                </li>
                <li style="color:#FC8800">
                    (收货不便时，可选择免费代收货服务)
                </li>
            </ul>
        </div>
        <button v-else class="btn" @click="toAdd">添加新收货人</button>
        <div class="orderinifo" v-for="goods in alldata.cartItems">
            <div class="goods">
                <div class="goodsfl">
                    <img :src="goods.skuThumbnail" alt="">
                </div>
                <div class="goodsfr">
                    <p class="goodsTit">{{goods.skuName}}</p>
                    <p class="goodsPoint">会员价 {{goods.price}}
                        <span class="orderP">元</span>
                    </p>
                </div> 
            </div>
            <div class="select">
                <p class="orderNum">购买数量</p>
                <div class="chagenum">
                    <span class="spannum">{{goods.quantity}}</span>
                </div>
            </div>
        </div>
        <!-- <p class="paymethod">可用余额 </p>
        <div class="selectpay">
            <span>{{accountBalance}}</span>
        </div> -->
        <div class="submitcon">共{{alldata.cartItems.length}}件，总计：
            <span>{{alldata.totalCost}}元</span>
            <button class="submitorder" @click="submitorder">确认</button>
        </div>
        <!-- 支付密码 -->
        <div class="openups " v-if="isBshow=='true'">
            <div class="tanceng">
                <div class="hide" @click="isBshow='false'">
                    <img src="../../assets/imgs/order/back.png" alt="" width="100%" height="100%">
                </div>
                <div class="shuom">
                    <span>请输入支付密码</span>
                </div>
                <div class="word">
                    <p class="top">
                        <input type="password" v-model="postPass.payPassword" placeholder="请输入支付密码">
                    </p>
                    <p class="wang" @click="direct('forgetPass')">忘记密码?</p>
                    <p class="rule">
                        <span @click="getPassword">确认</span>
                    </p>
                </div>
            </div>
        </div>
        <!-- 支付密码 -->
        <div class="submitconPoint" v-else>共{{alldata.quantity}}件，总计：
            <span>{{alldata.effectivePrice}}元</span>
            <button class="submitorder" @click="submitorder">确认</button>
        </div>
        <!-- 提示弹层 -->
        <div class="openup " v-if="isAshow=='true'">
            <div class="tanceng">
                <div class="hide" @click="isAshow='false'">
                    <img src="../../assets/imgs/order/erro.png" alt="" width="100%" height="100%">
                </div>
                <div class="word">
                    <p class="top">
                        <input type="checkbox" id="risk-use">将登陆密码作为支付密码
                    </p>
                    <p class="rule">
                        <span @click="direct('setPassword')">设置</span>
                        <span @click="getPaymentset">确认</span>
                    </p>
                </div>
            </div>
            <div class="sss"></div>
        </div>
    </div>
</template>
<script>
import { domain,domain2 } from '@/assets/js/config'
import http from "@/assets/js/axios"
import axios from 'axios'
import Qs from 'qs'
import $ from 'jquery'
import { maskTips } from '@/assets/js/dom'
export default {
    name: 'orderDetailPage',
    components: {
    },
    data() {
        return {
            goto:false,
            isAshow: 'false',
            isBshow: 'false',
            userInfon: '',
            userToken: '',
            alldata: {
                cartItems:[]
            },
            id: this.$route.query.id,
            spec: '',
            buId: '',
            accountBalance: 0,
            postSet: {
                isSet: 'true'
            },
            postPass: {
                payPassword: ''
            },
            goodsDetails: {},
            mobile: localStorage.getItem('phone'),
            addressInfo: [],
            num: this.$route.query.num,
            skuId: this.$route.query.skuId
        }
    },
    mounted() {
        var userToken = localStorage.getItem('token')
        this.userToken = userToken
        var that = this
        if (!userToken) {
            that.$router.push('/login')
        }
        this.getPayment()
        this.getAddress()
        let from = this.$route.query.from
        if(from == '1'){
            let num = this.$route.query.num
            let name = this.$route.query.name
            let price = this.$route.query.price
            let skuThumbnail = this.$route.query.thumbnail
            let ljgmObj ={}
            ljgmObj.skuName = name
            ljgmObj.price = price
            ljgmObj.skuThumbnail = skuThumbnail
            ljgmObj.quantity = num
            that.alldata.effectivePrice = num*price
            that.alldata.cartItems.push(ljgmObj)
            that.alldata.quantity = num

        }else{
            axios({
                url: domain2 + "/shop/api/cart/getShoppingCar",
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: {mobile: that.mobile}
            }).then(res => {
                that.alldata = res.data.data
            }).catch(err => {
                console.log(err)
            })
        }
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        // 是否存在支付密码
        getPayment: async function () {
            const res = await http.post('xshk/f/exist/pay/password?token=' + this.userToken)
            // console.log(res);
            this.userInfon = res.data
        },
        // 是否将登陆密码设置为支付密码
        getPaymentset: async function () {
            if ($('#risk-use').is(":checked")) {
                const res = await http.post('xshk/f/set/pay/password?token=' + this.userToken, this.postSet)
                // console.log(res);
                if (res.data.code == 0) {
                    maskTips({ id: 'nos-risk' + new Date().getTime(), txt: res.data.message })
                    this.submitorder()
                    this.isBshow = 'true'
                    this.isAshow = 'false'
                }
            } else {
                maskTips({ id: 'nod-risk' + new Date().getTime(), txt: '请选择是否将登陆密码作为支付密码' })
            }
        },
        // 效验支付密码
        getPassword: async function () {
             this.isBshow = 'false'
            var that = this;
            var userToken = localStorage.getItem('token');
            // console.log(this.postPass);
                if (this.postPass.payPassword) {
                    const res = await http.post('xshk/f/check/pay/password?token=' + this.userToken, this.postPass)
                    if (res.data.code == 0) {
                        var totalPrice = that.alldata.totalCost
                        //order生成
                        if(that.addressInfo.length<=0){
                            maskTips({id:'noaddress',txt:'请添加收货地址'})
                            return false
                        }
                        axios({
                            url: domain2 + '/shop/api/order/create',
                            method: 'post',
                            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                            data: Qs.stringify({
                                'mobile':that.mobile,
                                'receiverId':that.addressInfo[0].id,
                                'paymentMethodId': 1,
                                'shippingMethodId': 1,
                                'skuId': that.skuId,
                                'quantity': that.num
                            })
                        }).then(res => { that.paysucc(res) }).catch(err => { that.paysuccFail(err) })
                    } else {
                        maskTips({ id: 'nosrs-risk' + new Date().getTime(), txt: res.data.message })
                    }
                } else {
                    maskTips({ id: "photneh-fail" + new Date().getTime(), txt: "请输入密码后，再提交！" });
                }
        },
        //结算
        submitorder: function () {
            var that = this
            if (this.alldata.shippingAddress == '') {
                maskTips({ id: 'no-address' + new Date().getTime(), txt: '请先填写收货地址' })
            } else {
                var userToken = localStorage.getItem('token')
                var totalPrice = that.alldata.totalCost
                

                if (that.userInfon.code == 0) {
                    if (that.userInfon.data == 'notExist') {
                        // console.log(666);
                        this.isAshow = 'true'
                        // maskTips({ id: 'no-addryuess' + new Date().getTime(), txt: that.userInfon.message })
                    } else if (that.userInfon.data == 'exist') {
                        // console.log(777);
                        this.isBshow = 'true'
                    }
                } else {
                    maskTips({ id: 'no-addrtewess' + new Date().getTime(), txt: that.userInfon.message })
                }
            }
        },
        paysucc: function (res) {
            var that = this
            
            // console.log(res)
            if (res.data.code === 0) {
                //maskTips({ id: 'pay-succ' + new Date().getTime(), txt: res.data.message })
                let orderSn = res.data.data.orderSns[0]
                that.$router.push({
                    'path':'/scddPay',
                    'query':{
                        'orderSn':orderSn
                    }
                })
            } else {
                maskTips({ id: 'pay-fail' + new Date().getTime(), txt: res.data.message })
                that.$router.push('/rechargeFace')
            }
        },
        paysuccFail: function (err) {
            var that = this
            console.log(err)
            maskTips({ id: 'connect-fail' + new Date().getTime(), txt: res.data.message })
            that.$router.push('/index')
        },
        toAdd: function () {
            this.$router.push({                path: '/detail', query: {  }
            })
        },
        getAddress: function (){
            let that = this
            axios({
                url: domain2 + '/shop/api/member/receiver/list',
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify({
                    'mobile':that.mobile
                })
            }).then(res => { that.getAddressSucc(res) }).catch(err => { console.log(err) })
        },
        getAddressSucc: function(res){
            this.addressInfo = res.data.data.content
        }
    }
}
</script>

<style lang="stylus" scoped>
.com-cnt {
    width: 100%;
    height: 100%;
    color: #666666;

    button {
        background: #fff;
    }

    .active {
        background: #aad114;
    }

    .userinfo {
        height: 120px;
        padding: 0 8px;
        font-size: 14px;
        padding: 28px 0 0 40px;
        border-bottom: 2px dashed #aad114;
    }

    .btn {
        width: 100%;
        height: 1rem;
        background: #f8a120;
        border: none;
        outline: none;
        font-size: 14px;
        color: #fff;
        font-family: PingFang-SC-Medium;

        li {
            margin-bottom: 12px;
        }
    }

    .paymethod {
        width: 100%;
        height: 44px;
        line-height: 44px;
        border-bottom: 1px solid #eeeeee;
        font-size: 12px;
        padding: 0 24px;
    }

    .selectpay {
        float: right;
        position: relative;
        top: -60px;

        span {
            width: 75px;
            height: 22px;
            margin-right: 12px;
            font-size: 12px;
            color: red;
        }
    }

    .orderinifo {
        padding: 0 12px;
        font-size: 12px;

        .orderTitle {
            height: 30px;
            line-height: 30px;
        }

        .goods {
            height: 105px;

            .goodsfl {
                float: left;
                width: 100px;
                height: 100px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .goodsfr {
                float: left;
                padding: 5px 0 0 7px;

                .goodsTit {
                    font-size: 14px;
                    color: #333333;
                    font-weight: 600;
                    width: 200px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .goodsSpec {
                    font-size: 12px;
                    color: #999999;
                    margin-top: 4px;
                }

                .goodsPrice {
                    font-size: 16px;
                    color: #FE0000;
                    margin-top: 3px;
                }

                .goodsPoint {
                    font-size: 16px;
                    color: #E67E22;
                    margin-top: 3px;
                }

                .orderP {
                    font-size: 12px;
                }
            }
        }

        .select {
            padding-left: 12px;
            color: #333333;
            overflow: hidden;

            p {
                width: 100%;
                height: 44px;
                line-height: 44px;
                border-bottom: 1px solid #eeeeee;
            }

            p:last-child {
                position: relative;
                top: -20px;
            }

            p.orderNum {
                border-bottom: 1px dashed #333;
            }

            .chagenum {
                float: right;
                height: 20px;
                position: relative;
                top: -34px;

                span {
                    border: 1px solid #dddddd;
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    display: inline-block;
                    text-align: center;
                    margin-left: 9px;
                }

                span.spannum {
                    width: 54px;
                }
            }
        }
    }

    .submitcon {
        height: 50px;
        font-size: 12px;
        padding-left: 12px;
        line-height: 50px;
        position: fixed;
        bottom: 0;
        z-index: 999;
        background: #fff;
        width: 100%;
        box-shadow: 0 -1px 8px;

        span {
            color: #FF0000;
            font-size: 16px;
        }

        .submitorder {
            background: #aad114;
            float: right;
            height: 100%;
            border: 0;
            width: 120px;
            color: #FEFEFE;
            font-size: 16px;
        }
    }

    .submitconPoint {
        height: 50px;
        font-size: 12px;
        padding-left: 12px;
        line-height: 50px;
        position: fixed;
        bottom: 0;
        z-index: 999;
        background: #fff;
        width: 100%;
        box-shadow: 0 -1px 8px;

        span {
            color: #e67e22;
            font-size: 16px;
        }

        .submitorder {
            background: #aad114;
            float: right;
            height: 100%;
            border: 0;
            width: 120px;
            color: #FEFEFE;
            font-size: 16px;
        }
    }

    /* Popup */
    .openup {
        max-width: 750px;

        .sss {
            position: fixed;
            overflow: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 5;
            background-color: rgba(55, 55, 55, 0.6);
        }

        .tanceng {
            max-width: 750px;
            position: fixed;
            z-index: 50;
            top: 150px;
            background-image: url('../../assets/imgs/order/bgc.png');
            background-size: 100% 100%;
            width: 100%;
            height: 300px;

            .hide {
                max-width: 750px;
                height: 30px;
                width: 30px;
                position: fixed;
                top: 150px;
                right: 70px;
                z-index: 99;
            }

            div.word {
                text-align: center;

                p.top {
                    margin-top: 200px;
                    color: #fff;
                    font-size: 15px;
                }

                p.rule {
                    font-size: 20px;
                    margin-top: 40px;
                    color: #fff;

                    span {
                        padding: 10px 45px;
                    }

                    span:nth-child(2) {
                        color: #C2DF5A;
                    }
                }
            }
        }
    }

    /* Popup */
    .openups {
        max-width: 750px;
        position: fixed;
        bottom: 50px;
        width: 100%;
        z-index: 999;
        background-color: #efefef;

        // display: none;
        .sss {
            position: fixed;
            overflow: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -5;
            background-color: rgba(55, 55, 55, 0.6);
        }

        .tanceng {
            position: relative;
            max-width: 750px;
            width: 100%;
            height: 250px;
            z-index: 999;

            .hide {
                max-width: 750px;
                height: 30px;
                width: 20px;
                position: absolute;
                top: -5px;
                left: 30px;
                z-index: 99;
            }

            div.shuom {
                z-index: 99;
                color: #333;
                padding-top: 15px;
                font-size: 20px;
                text-align: center;
            }

            div.word {
                z-index: 99;
                text-align: center;

                p.top {
                    margin-top: 10px;
                    color: #000;

                    input {
                        font-size: 20px;
                        text-align: center;
                        border-bottom: 1px solid #333;
                        background-color: #efefef;
                    }
                }

                p.wang {
                    z-index: 99;
                    text-align: right;
                    padding-top: 10px;
                    padding-right: 70px;
                    font-size: 6px;
                    color: #9CC900;
                }

                p.rule {
                    z-index: 99;
                    margin-top: 15px;
                    color: #000;

                    span {
                        font-size: 20px;
                        padding: 10px 100px;
                        border-radius: 20px;
                        color: #fff;
                        height: 50px;
                        width: 800px;
                        background-color: #C2DF5A;
                    }
                }
            }
        }
    }
}
</style>